// src/pages/shizhiran/trainingLevel.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './gender.css';

const TrainingLevel: React.FC = () => {
  const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
  const [isNextEnabled, setIsNextEnabled] = useState<boolean>(false);
  const navigate = useNavigate();
  const levels = [
    { key: 'beginner', label: '初学', desc: '我想开始训练' },
    { key: 'intermediate', label: '进阶', desc: '我想1周训练2次' },
    { key: 'advanced', label: '强化', desc: '我想1周训练3-5次' },
    { key: 'challenge', label: '挑战', desc: '我想1周训练5次以上' }
  ];

  const handleLevelSelect = (level: string) => {
    setSelectedLevel(level);
    setIsNextEnabled(true);
  };

  const handleNext = () => {
    if (selectedLevel) {
      console.log('Selected level:', selectedLevel);
      window.location.href = '/interest'; // 跳转到兴趣选择页
    }
  };

  const handleBack = () => {
    navigate('/targetweight');
  };

  const handleSkip = () => {
    navigate('/interest');
  };

  return (
    <div className="container">
      <div style={{display: 'flex', justifyContent: 'space-between',alignItems: 'center',padding:'16px 0'}}>
        <button className="back-button" onClick={handleBack}>
          ←
        </button>
        <div className="progress-bar">
          <div className="progress" style={{ width: '85%' }}></div>
        </div>
        <button style={{fontSize:'14px',color:'#666',background:'none',border:'none'}} onClick={handleSkip}>跳过</button>
      </div>

      <div className="title">选择训练级别</div>

      <div className="options-container">
        {levels.map((level) => (
          <div
            key={level.key}
            className={`option-card ${selectedLevel === level.key ? 'selected' : ''}`}
            onClick={() => handleLevelSelect(level.key)}
          >
            <div className="option-title">{level.label}</div>
            <div className="option-desc">{level.desc}</div>
          </div>
        ))}
      </div>

      <button
        className={`next-button1 ${isNextEnabled ? 'enabled' : 'disabled'}`}
        onClick={handleNext}
        disabled={!isNextEnabled}
      >
        下一步
      </button>
    </div>
  );
};

export default TrainingLevel;